<template>
	<view class="page">
		<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll">
			<view class="head flex items-center flex-center">
				<view class="head_title">
					第二步：记住没见过的单词
				</view>
				<view class="head_title marginLeft-30">
					第
				</view>
				<view class="head_num">
					{{nowIndex}}
				</view>
				<view class="head_title">
					个
				</view>
			</view>
			<view class="flex items-center flex-center">
				<view class="line_progress">
					<up-line-progress :percentage="percentage" :showText="false" activeColor='#51D580'
						inactiveColor='#EBEBEB' height="8rpx"></up-line-progress>
				</view>
				<image src="../../static/image/jishi.png" mode="" class="line_img"></image>
				<up-count-down ref="countDown" :time="seconds" format="ss" @change="onChange" @finish="finish" >
					<view class="line_num">
						{{ timeData.seconds }}
					</view>
				</up-count-down>
			</view>
			<view class=" flex flex-center name_box items-center">
				<view class="name">
					{{currentWord}}
				</view>
				<image src="../../static/image/pronunciation.png" mode="" class="name_img"></image>
			</view>
			<image src="../../static/image/xiajiantou.png" mode="" class="xia_img"></image>
			<view class="pro_lists">
				<view class="pro u-line-1" v-for="(t,id) in returnVal(tran)" :key="id">
					{{t}}
				</view>
			</view>
			<!-- 	<view class="cont flex flex-center items-center">
			<image src="../../static/image/cont_warn.png" mode="" class="cont_img"></image>
			<view class="cont_title">
				距离我们给您定制的个性化方案
				只差一步，加油！
			</view>
		</view> -->
			<view class="fixed" v-if="isLast">
				<view class="flex flex-center items-center padding-20">
					<image src="../../static/image/warn_img.png" mode="" class="warn_img"></image>
					<view class="warn_title">
						一定要确定自己记住了这个单词意思后，再点击下一个
					</view>
				</view>
				<view class="" v-if="!status">
					<view class="btn" @click="nextClick()">
						下一个
					</view>
				</view>
				<view class="" v-else>
					<view class="btn" @click="remember()">
						记住了
					</view>
					<view class="remember_btn" @click="noRemember()">
						没记住
					</view>
				</view>
			</view>
		</page-container>
		<!-- 	<up-modal :show="show" content='距领取超级个性化记忆方案只差步，再坚持一下吧!退出后本次测试记录将被清空' showCancelButton='true' cancelText='退出'
			confirmText='继续测试' @cancel='cancel' @confirm='confirm'></up-modal> -->
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					距领取超级个性化记忆方案只差步，再坚持一下吧!退出后本次测试记录将被清空
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel">
						退出
					</view>
					<view class="popup_sure" @click="confirm">
						继续测试
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onBackPress
	} from '@dcloudio/uni-app';
	const notseenWordsApi = inject('notseenWords')
	const newInsertMemoryWordApi = inject('newInsertMemoryWord')
	const percentage = ref(100)
	const timeData = ref({});
	const seconds = ref(10000)
	const status = ref(false) //是否展示下一步弹窗
	const popupStatus = ref(false) //提示弹窗是否显示
	const swicthStatus = ref(false) //是否能连续点击开关
	const wordList = ref([])
	const currentWord = ref('')
	const innerAudioContext = uni.createInnerAudioContext();
	const tempIndex = ref(1) //记住到了第几个单词
	const nowIndex = ref(1) //当前单词属于第几个
	const countDown = ref(null);
	innerAudioContext.autoplay = false;
	innerAudioContext.onCanplay(() => {});
	innerAudioContext.onPlay((e) => {})
	innerAudioContext.onEnded((e) => {})
	const isShowPage = ref(true)
	// 定义 onChange 方法  
	const onChange = (e) => {
		timeData.value = e;
		console.log(timeData.value.seconds, 129)
		percentage.value = (e.seconds / 10) * 100
		if (status.value == true && timeData.value.seconds == 0) {
			end()
		}
		
	};

	const tran = ref([])
	// 倒计时是否结束
	const finishIndex = ref(1)
	const finish = (e) => {
		console.log(e, '倒计时结束')
		// finishIndex.value++
		// if(finishIndex.value<=3){
		// 		nextClick()
		// }else{
		// 	end()
		// }
		nextClick()
		// end()
	};
	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}


	onUnload((op) => {
		countDown.value.reset();
		countDown.value.pause();
	})
	onLoad((op) => {
		notseenWordsApi({}).then(res => {
			console.log(res, 115)
			wordList.value = res
			currentWord.value = wordList.value[0].wordHead
			tran.value = wordList.value[0].tran
			playVideo()
		})
		console.log(wordList.value)
		console.log(currentWord.value, 'currentWord.value')
	})
	const show = ref(false)
	const playVideo = () => {
		innerAudioContext.stop();
		innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${currentWord.value}&type=1`;
		innerAudioContext.play();
	}
	const beforeleave = (e) => {
		console.log(e)
		isShowPage.value = false
		countDown.value.pause();
		show.value = true

	}
	const isLast = ref(true)
	const timer = ref(null)
	// 下一个
	const nextClick = () => {
		tempIndex.value = tempIndex.value + 1
		nowIndex.value = nowIndex.value + 1
		countDown.value.pause();
		countDown.value.reset();
		// seconds.value = 10000
		percentage.value = 100
		console.log(tempIndex.value, nowIndex.value)
		wordList.value.forEach((item, index) => item.rember_status = 0);
		if (nowIndex.value > 2) {
			nowIndex.value = 1
			status.value = true
			currentWord.value = wordList.value[nowIndex.value - 1].wordHead
			tran.value = wordList.value[nowIndex.value - 1].tran
			console.log(timeData.value.seconds, 200)
			// timer.value = setInterval(() => {
			// 	timeData.value.seconds--
			// 	if (status.value == true && timeData.value.seconds == 0) {
			// 		clearInterval(timer.value);
			// 		end()
			// 	}
			// }, 1000);

			// playVideo()
			playVideo()
		} else {
			currentWord.value = wordList.value[nowIndex.value - 1].wordHead
			tran.value = wordList.value[nowIndex.value - 1].tran
			playVideo()
		}
	};
	// 记住了
	const remember = () => {
		nowIndex.value = nowIndex.value + 1
		if (nowIndex.value != 11) {
			countDown.value.pause();
			countDown.value.reset();
			// seconds.value = 10000
			percentage.value = 100
			currentWord.value = wordList.value[nowIndex.value - 1].wordHead
			tran.value = wordList.value[nowIndex.value - 1].tran
			wordList.value[nowIndex.value - 1].rember_status = 1
			playVideo()
			console.log(nowIndex.value, 186, tempIndex.value)
		}
		if (nowIndex.value == 11) {
			isLast.value = false
			end()
		}
		if (nowIndex.value == tempIndex.value) {
			status.value = false
		}


	}
	// 没记住
	const noRemember = () => {
		
		end()
	}
	const cancel = () => {
		end()
	}
	const confirm = () => {
		isShowPage.value = true
		show.value = false
		countDown.value.start();
	}
	// 提交记忆单词
	const end = () => {
		const knowword = wordList.value
			.filter(item => item.rember_status === 1)
			.map(item => item.wordId);
		newInsertMemoryWordApi({
			knowword: knowword.join(',')
		}).then(res => {
			console.log(res, 178)
			uni.redirectTo({
				url: '/pages/memory/memorySuccess?item=' + JSON.stringify(res)
			})
		})
	}
</script>
<style>
	page {
		position: relative !important;
		top: 0px !important;
	}
</style>
<style scoped lang="scss">
	.head {
		padding: 40rpx 0 32rpx 0;

		.head_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
		}

		.head_num {
			font-weight: 500;
			font-size: 28rpx;
			color: #51D580;
			font-family: PingFang SC, PingFang SC;
		}
	}

	.line_progress {
		width: 598rpx;
		height: 8rpx;
	}

	.line_img {
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx 0 20rpx;
	}

	.line_num {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #51D580;
		line-height: 33rpx;
	}

	.name_box {
		margin-top: 80rpx;

		.name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 60rpx;
			color: #333333;
			line-height: 70rpx;
		}

		.name_img {
			width: 44rpx;
			height: 44rpx;
			margin-left: 24rpx;
		}
	}

	.xia_img {
		margin: 30rpx auto 50rpx;
		width: 48rpx;
		height: 119rpx;
		display: block;
	}

	.pro_lists {
		width: 660rpx;
		margin: 0 auto;

		.pro {

			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
			text-align: center;
			width: 660rpx;
			margin-bottom: 20rpx;
		}
	}

	.cont {
		width: 592rpx;
		height: 146rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		margin: 74rpx auto 0;

		.cont_img {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}

		.cont_title {
			width: 392rpx;
			height: 80rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}
	}

	.warn_img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.warn_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		line-height: 28rpx;
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		background: #51D580;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto 24rpx;
	}

	.remember_btn {
		width: 702rpx;
		height: 104rpx;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		border: 2rpx solid #51D580;
		text-align: center;
		line-height: 104rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #51D580;
		margin: 0 auto 10rpx;
	}

	.fixed {
		left: 24rpx;
		bottom: 0;
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;

		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 20rpx;
		}

		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 440rpx;
			height: 100rpx;
			margin: 120rpx auto 0;
		}

		.popup_cancel {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.popup_sure {
			width: 252rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}


	}
</style>